<template>
  <div class="user-orders">
    <el-card class="orders-card">
      <template #header>
        <span>我的订单</span>
      </template>

      <div class="orders-content">
        <!-- 使用可复用的订单列表组件 -->
        <OrderListComponent 
          :show-header="false"
          :compact="true"
          @order-click="handleOrderClick"
          @order-action="handleOrderAction"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import OrderListComponent from '@/components/OrderListComponent.vue'

// 事件处理
const handleOrderClick = (orderId: number) => {
  console.log('个人中心订单点击:', orderId)
}

const handleOrderAction = (action: string, orderId: number) => {
  console.log('个人中心订单操作:', action, orderId)
}
</script>

<style scoped>
.user-orders {
  width: 100%;
}

.orders-card {
  margin-bottom: 20px;
}

.orders-content {
  min-height: 400px;
}
</style>
